<template>
  <div class="edit_profile">
    <myheader title="编辑个人信息">
      <!-- 指定图标所放置的插槽，通过slot可以指定 -->
      <van-icon name="arrow-left" slot="left" @click="$router.back()" />
      <van-icon
        name="wap-home-o"
        slot="right"
        @click="$router.push({ path: '/index' })"
      />
    </myheader>
    <div class="userImg">
      <img :src="userinfo.head_img" alt="" />
      <van-uploader :after-read="afterRead" />
    </div>
    <mycell
      title="昵称"
      :desc="userinfo.nickname"
      @click="nickshow = !nickshow"
    ></mycell>

    <van-dialog
      v-model="nickshow"
      title="修改u昵称"
      show-cancel-button
      @confirm="editNickname"
    >
      <van-field v-model="nickname" label="昵称" placeholder="请输入新的昵称" />
    </van-dialog>
    <mycell
      title="密码"
      :desc="userinfo.password"
      type="pass"
      @click="passshow = !passshow"
    >
    </mycell>
    <van-dialog
      v-model="passshow"
      title="修改密码"
      show-cancel-button
      @confirm="editPass"
      :before-close="beforeClose"
    >
      <van-field
        label="源密码"
        placeholder="请输入原始密码"
        v-model="originPass"
        required
      />
      <van-field
        label="新密码"
        placeholder="请输入原始密码"
        v-model="newPass"
      />
    </van-dialog>
    <!-- van-field的v-model是实现双向绑定 -->
    <mycell
      title="性别"
      :desc="userinfo.gender == 0 ? '女' : '男'"
      @click="gendershow = !gendershow"
    ></mycell>
    <van-dialog
      v-model="gendershow"
      title="修改性别"
      show-cancel-button
      @confirm="editGender"
    >
      <van-picker
        :columns="['女', '男']"
        :default-index="userinfo.gender"
        @change="getGender"
      />
    </van-dialog>
  </div>
</template>


<script>
import myheader from "@/components/myheader.vue";
import mycell from "@/components/mycell.vue";
import axios from "@/utils/myaxios.js";
import { getUserInfo, editUser } from "@/apis/user.js";
import { fileUpload } from "@/apis/fileUpload.js";
export default {
  data() {
    return {
      userinfo: {},
      nickshow: false,
      passshow: false,
      gendershow: false,
      // 下面是编辑操作所单独定义的属性
      nickname: "", // 昵称
      originPass: "", //原始密码
      newPass: "", //新密码

      newGender: "",
    };
  },
  components: {
    myheader,
    mycell,
  },
  methods: {
    // a:当前组件实例  b:当前组件所展示的值  c:索引
    // 注意，索引就和后台所需要的0，1对应
    getGender(a, b, c) {
      this.newGender = c;
    },

    //修改性别
    async editGender() {
      let result = await editUser(this.userinfo.id, { gender: this.newGender });
      if (result.data.message == "修改成功") {
        console.log(result);
      }
      this.$toast.success("修改成功");
      // 这里的重置为了页面的展示效果
      this.userinfo.gender = this.newGender;
    },

    // 修改密码时阻止弹窗关闭
    beforeClose(action, done) {
      console.log(action);
      // 只有用户单击了确认，且原始密码输入不正确的时候才需要阻止弹窗的关闭
      if (action == "confirm" && this.originPass !== this.userinfo.password) {
        this.$toast.fail("原始密码输入不正确");
        done(false);
      } else {
        done();
        setTimeout(() => {
          this.originPass = this.newPass = "";
        }, 300);
      }
    },
    //修改密码
    async editPass() {
      // 1.判断用户的原始密码是否输入正确
      if (this.originPass == this.userinfo.password) {
        // 2.如果输入正确，则获取用户输入的新密码进行编辑请求
        let result = await editUser(this.userinfo.id, {
          password: this.newPass,
        });
        if (result.data.message == "修改成功") {
          console.log(result);
          this.$toast.success("修改成功");
          // 这里的重置并不是为了页面的展示效果，目的是不了用户在重复修改密码的时候能够正确的进行在原始密码的匹配
          this.userinfo.password == this.newPass;
        }
      } else {
        this.$toast.fail("原始密码输入不正确");
      }
    },
    // 编辑昵称
    async editNickname() {
      if (this.nickname.trim().length == 0) {
        // this.$toast.warning("请你输入昵称");
        this.$toast.fail("请你输入昵称");
        return;
      }
      let result = await editUser(this.userinfo.id, {
        nickname: this.nickname,
      });
      // console.log(result);
      if (result.data.message == "修改成功") {
        this.$toast.success("修改成功");
      }
      this.userinfo.nickname = this.nickname;
    },
    // 触发afterRead的时候，仅仅说明这个组件已经获取到的用户所选择的文件对象，但是上传操作得我们自己再手动的完成
    async afterRead(myfile) {
      let formdata = new FormData();
      formdata.append("file", myfile.file);
      // 实现文件上传
      let res = await fileUpload(formdata);
      // 重新设置userinfo的head_img的值，以实现预览更新
      this.userinfo.head_img = axios.defaults.baseURL + res.data.data.url;
      // 同时还要实现用户头像的编辑
      // 一定要注意这里传递的数据不要拼接基准路径
      let result = await editUser(this.userinfo.id, {
        head_img: res.data.data.url,
      });
    },
  },
  async mounted() {
    let id = this.$route.params.id;
    let res = await getUserInfo(id);
    console.log(res);
    // 这里要注意一个细节，图片不一定有，如果新用户是第一次进入到这个页面，那么图片是 不存在的，如果存在也要注意只有目录+文件名
    // 1.如果没有图片，给赋值默认图片
    // 2.如果有图片也要在前面拼接基准路径
    this.userinfo = res.data.data;

    this.nickname = this.userinfo.nickname;

    if (this.userinfo.head_img) {
      this.userinfo.head_img = axios.defaults.baseURL + this.userinfo.head_img;
    } else {
      this.userinfo.head_img =
        axios.defaults.baseURL + "/uploads/image/default.png";
    }
  },
};
</script>


<style lang="less" scoped>
.edit_profile {
  .userImg {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    > img {
      width: 90 * 100vw/360;
      height: 90 * 100vw/360;
    }
    // 重置文件上传组件的样式-使用深度选择器，能够在父组件中影响子组件的样式
    // 大小
    /deep/ .van-uploader__upload {
      width: 90 * 100vw/360;
      height: 90 * 100vw/360;
    }
    // 定位
    /deep/ .van-uploader {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
    }
  }
}
</style>